<template>
  <div class="left-chart-2">
    <div class="lc2-header">
      轧辊库存量
    </div>
    <div class="lc2-details">

    </div>
    <ChartAuto class="lc2-chart" id="left" :option="state.option" />
    <dv-decoration-2 style="height:10px;" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue';
import ChartAuto from "@/components/ChartAuto.vue";

const state = reactive({
  option: {
    color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },

    legend: {
      // 修改小图标的大小
      itemWidth: 3,
      itemHeight: 10,
      orient: "vertical",
      left: "1%",
      top: "0%",
      // 修改图例组件的文字为 12px
      textStyle: {
        color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
        fontSize: "15"
      }
    },
    series: [
      {
        name: "标题",
        type: "pie",
        // 这个radius可以修改饼形图的大小
        // radius 第一个值是内圆的半径 第二个值是外圆的半径
        radius: ["40%", "60%"],
        center: ["52%", "50%"],
        label: {
          color: "#06a0ab"
        },
        // 链接文字和图形的线是否显示
        labelLine: {
          show: true
        },
        data: [
          { value: 1, name: "一中间辊" },
          { value: 4, name: "二中间辊" },
          { value: 2, name: "工作辊" },
          { value: 2, name: "支撑辊" },
          // { value: 1, name: "50岁以上" }
        ]
      }
    ]
  },
})
</script>

<style lang="less">
.left-chart-2 {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;

  .lc2-header {
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    text-indent: 20px;
    margin-top: 10px;
  }

  .lc2-details {
    height: 40px;
    font-size: 16px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    text-indent: 20px;

    span {
      color: #096dd9;
      font-weight: bold;
      font-size: 35px;
      margin-left: 20px;
    }
  }

  .lc2-chart {
    height: calc(~"100% - 80px");
  }
}
</style>
